<template>
    <el-dialog :title="action == 'add' ? '创建部门' : '编辑部门'" v-model="showModal">
        <el-form ref="dialogFormRef" :model="deptForm" :rules="rules" label-width="120px">
            <el-form-item label="上级部门" prop="parentId">
                <el-cascader placeholder="请选择上级部门" v-model="deptForm.parentId"
                    :props="{ checkStrictly: true, value: '_id', label: 'deptName' }" clearable :options="Options"
                    :show-all-levels="true"></el-cascader>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input placeholder="请输入部门名称" v-model="deptForm.deptName"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="user">
                <el-select placeholder="请选择部门负责人" v-model="deptForm.user" @change="handleUser">
                    <el-option v-for="item in userList" :key="item.userId" :label="item.userName"
                        :value="`${item.userId}`"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="负责人邮箱" prop="userEmail">
                <el-input placeholder="请输入负责人邮箱" v-model="deptForm.userEmail" disabled></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="submitForm" type="primary">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, getCurrentInstance, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
const showModal = ref(true)
const props = defineProps({
    Options: {
        type: Array,
        default: () => []
    },
    action: {
        type: String,
        default: 'add'
    },
    Item: {
        type: Object,
        default: ''
    },

})
onMounted(() => {
    if (props.action == 'edit') {
        deptForm.value = props.Item
    } else {
        deptForm.value.parentId = props.Item._id
        console.log(deptForm.value.parentId)
    }
    getAllUserList()
})
const userList = ref([])
const getAllUserList = async () => {
    let res = await $Tajax.getAllUserList();
    userList.value = res
}
const emit = defineEmits(['close'])
const dialogFormRef = ref(null)
const deptForm = ref({
    parentId: [null],
    userId: null,
    deptName: null,
    user: null,
    userEmail: null,
})

const rules = ref({
    parentId: [
        {
            required: true,
            message: "请选择上级部门",
            trigger: "blur",
        },
    ],
    deptName: [
        {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
        },
    ],
    user: [
        {
            required: false,
            message: "请选择负责人",
            trigger: "blur",
        },
    ],
})

const submitForm = () => {
    dialogFormRef.value.validate(async (valid) => {
        if (valid) {
            console.log(deptForm.value)
            let params = { ...deptForm.value, action: props.action };
            let res = await $Tajax.deptOperate(params);
            console.log(res)
            ElMessage.success("操作成功");
            emit('close', true)
            dialogFormRef.value.resetFields()
        }
    })
}

const cancel = () => {
    emit('close', false)
}

</script>

<style></style>